CSS 效能優化


Posted by Christy on 2021-09-16

[ MTR05 ]_第十三週(07/05 ~ 07/11):現代前端工具_CSS 優化 Part1 by minw

優化可以分成以下三種:

資源本身大小

minify

gzip:主要是後端

資源載入方式

  1. CSS Sprites

  2. Critical CSS

  3. Cache:後端

資源執行方式

選擇器

屬性渲染


Part2

Critical CSS

什麼情況下會載入慢?東西大

解法 1 可以分批載入,用 Critical CSS 把重要的先傳過去,剩下的慢慢傳

解法 2 小東西包成大東西,一起傳:例如 icon、小圖等等

Cache:東西傳過來以後,暫存在瀏覽器上。(偏後端)


part4

minify 或壓縮:

例如空格只是為了易讀,可以移除。










Related Posts

用 HTML br 替換 ↵ 換行前先想一想

用 HTML br 替換 ↵ 換行前先想一想

學習 Git (4) - 淺談 Commit 規範

學習 Git (4) - 淺談 Commit 規範

TypeScript 函式定義字串型別相連和JavaScript String.prototype.concat() 的差異

TypeScript 函式定義字串型別相連和JavaScript String.prototype.concat() 的差異


Comments